<template>
    <div class="son">
        <div class="nav">
            <router-link to="/son/music" active-class="active" exact>推荐音乐</router-link>
            <router-link to="/son/hot" active-class="active">热歌榜</router-link>
            <router-link to="/son/search" active-class="active">搜索</router-link>
        </div>
        <!-- 选项卡展示的内容 -->
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name:"Son",
}
</script>
<style scoped lang="less">
.son .nav {
    display: flex;
    justify-content: space-between;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    border-bottom: 1px solid #ccc;
}
.son .nav a{
    display: inline-block;
    flex: 1;
}
.active{
    color: red;
    border-bottom: 1px solid red;
}
</style>